<template>
<div class="assetsrechargemian">
    <section class="recharge">
        <ul class="rechargeheader">
            <li class="list">
                <h2>{{$t('rechange[0]')}}</h2>
            </li>
            <li class="list">
                <h2>{{$t('detailed[1]')}}</h2>
                <el-select v-model="value" @change="handleSubmit" :placeholder="$t('detailed[2]')">
                    <el-option v-for="(item, index) in rechargetype" :key="index" :label="item.code" :value="item.wid"></el-option>
                </el-select>
            </li>
        </ul>

        <section class="rechargemian">
            <ul class="mian">
                <li class="list">
                    <h2 class="title">{{$t('rechange[1]')}}</h2>
                    <div>
                        <img :src="RechargeDATA.qrcode" alt />
                    </div>
                </li>
                <li class="list" @click="copy(RechargeDATA.address)">
                    <h2 class="title">{{$t('rechange[2]')}}</h2>
                    <div>
                        <el-input :placeholder="$t('rechange[3]')" v-model="RechargeDATA.address" :disabled="true"></el-input>
                    </div>
                    <p>{{$t('rechange[4]')}}</p>
                </li>
                <li class="list">
                    <h2 class="title">{{$t('rechange[5]')}}</h2>
                    <p>{{$t('rechange[6]')}}</p>
                    <p>{{$t('rechange[7]')}}</p>
                    <p>{{$t('rechange[8]')}}</p>
                </li>
            </ul>
        </section>
    </section>
</div>
</template>

<script>
import {
    coinList,
    walletRecharge
} from "@/api/assetstotal";
import {
    assetInfo
} from "@/api/user";
// import { mapActions } from 'vuex'
// import { setToken } from "@/libs/util";
export default {
    name: "assetsrecharge",
    data() {
        return {
            value: 0,
            input: "dfasfasdfsafs",
            RechargeDATA: {},
            rechargetype: []
        };
    },
    methods: {
        copy(content) {
            var aux = document.createElement("input");
            aux.setAttribute("value", content);
            document.body.appendChild(aux);
            aux.select();
            document.execCommand("copy");
            document.body.removeChild(aux);
            this.$message({
                type: 'success',
                message: this.$t('fog[4]')
            });
        },
        handleSubmit() {
            this.getdata();
        },
        getdata() {
            let _Data = {
                wid: this.value
            };

            walletRecharge(_Data)
                .then(res => {
                     
                        this.RechargeDATA = res ;
                    
                })
                .catch(err => {
                    this.RechargeDATA = {
                        address: res.address,
                        qrcode: res.qrcode
                    };
                });
        }
    },
    created() {
        coinList().then(res => {
            this.rechargetype = res
            this.value = res[0].wid
            setTimeout(() => {
                this.getdata();
            });
        });
    }
};
</script>
